$(function(){
    var file_bg, file_portrait; // 定义一个全局变量，为一个文本选择器。
    file_bg = $('<input type="file" />'); // 这样file就是jquery创建的一个文本选择器，但是因为我们并没有把它加载到页面山，所以是不可见的。
    file_portrait = $('<input type="file" />');

    // button的单击事件
    $('#select_bg_btn').click(function(){
        // 启动文件选择
        file_bg.click();
    });

    $('#select_portrait_btn').click(function() {
        file_portrait.click();
    })

    file_portrait.change(function(e) {
        var select_file = file_portrait[0].files[0];
        var formData = new FormData();
        formData.append("file", select_file);
        $('#select_portrait_spin').prop('hidden', false);

        $.ajax({
            type:'post',
            url:'/upload',
            processData:false,
            contentType:false,
            data:formData,
            success:function (msg) {
                console.log(msg);
                $('#portrait_image').attr("src", msg);
                $('#select_portrait_spin').prop('hidden', true);
            }
        })
    })

    // 选择好文件后，获取选择的内容
    file_bg.change(function(e){
        var select_file = file_bg[0].files[0];
        var formData = new FormData();
        formData.append("file", select_file);

        $('#select_bg_spin').prop('hidden', false);

        $.ajax({
            type:'post',
            url:'/upload',
            processData:false,
            contentType:false,
            data:formData,
            success:function (msg) {
                console.log(msg);
                $('#bg_image').attr("src", msg);
                $('#select_bg_spin').prop('hidden', true);
            }
        })
    })
})

// Make the DIV element draggable:
dragElement(document.getElementById("synthesis_fg"));

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

function onSynthesisClick() {
    var portraitImg = $('#portrait_image').attr('src');
    var backgroundImg = $('#bg_image').attr('src');

    $('#construct_spin').prop('hidden', false);

    $.ajax({
        type: 'post',
        async: true,
        data: {'bg': backgroundImg, 'fg' : portraitImg},
        url: document.location.origin + '/api/synthesis',
        dataType: 'text',
        error: function () {
            console.log("Ajax 发生错误！");
        },
        success: function (data) {
            $('#synthesis_bg').attr('src', backgroundImg);
            $('#synthesis_fg').attr('src', data);

            $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

            $('#construct_spin').prop('hidden', true);
        }
    });
}

$(document).ready(function() {
    $('#select_bg_spin').prop('hidden', true);
    $('#select_portrait_spin').prop('hidden', true);
    $('#construct_spin').prop('hidden', true);
});